<template>
  <view class="system-container">
    <view class="header-section">
      <text class="page-title">系统管理</text>
    </view>
    
    <view class="menu-grid">
      <view class="menu-item" @click="navigateTo('user')">
        <view class="menu-icon user-icon"></view>
        <text class="menu-text">用户管理</text>
      </view>
      
      <view class="menu-item" @click="navigateTo('role')">
        <view class="menu-icon role-icon"></view>
        <text class="menu-text">角色管理</text>
      </view>
      
      <view class="menu-item" @click="navigateTo('permission')">
        <view class="menu-icon permission-icon"></view>
        <text class="menu-text">权限管理</text>
      </view>
      
      <view class="menu-item" @click="navigateTo('menu')">
        <view class="menu-icon menu-icon"></view>
        <text class="menu-text">菜单管理</text>
      </view>
      
      <view class="menu-item" @click="navigateTo('log')">
        <view class="menu-icon log-icon"></view>
        <text class="menu-text">操作日志</text>
      </view>
      
      <view class="menu-item" @click="navigateTo('coach')">
        <view class="menu-icon coach-icon"></view>
        <text class="menu-text">教练管理</text>
      </view>
      
      <view class="menu-item" @click="navigateTo('plan')">
        <view class="menu-icon plan-icon"></view>
        <text class="menu-text">健身计划</text>
      </view>
      
      <view class="menu-item" @click="navigateTo('statistics')">
        <view class="menu-icon statistics-icon"></view>
        <text class="menu-text">统计分析</text>
      </view>
      
      <view class="menu-item" @click="navigateTo('file')">
        <view class="menu-icon file-icon"></view>
        <text class="menu-text">文件管理</text>
      </view>
      
      <view class="menu-item" @click="navigateTo('review')">
        <view class="menu-icon review-icon"></view>
        <text class="menu-text">评价管理</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 导航到指定模块
const navigateTo = (module: string) => {
  switch (module) {
    case 'user':
      uni.navigateTo({
        url: '/pages/system/user/list'
      })
      break
    case 'role':
      uni.navigateTo({
        url: '/pages/system/role/list'
      })
      break
    case 'permission':
      uni.navigateTo({
        url: '/pages/system/permission/list'
      })
      break
    case 'menu':
      uni.navigateTo({
        url: '/pages/system/menu/list'
      })
      break
    case 'log':
      uni.navigateTo({
        url: '/pages/system/log/list'
      })
      break
    case 'coach':
      uni.navigateTo({
        url: '/pages/coach/list'
      })
      break
    case 'plan':
      uni.navigateTo({
        url: '/pages/plan/list'
      })
      break
    case 'statistics':
      uni.navigateTo({
        url: '/pages/statistics/index'
      })
      break
    case 'file':
      uni.navigateTo({
        url: '/pages/system/file/list'
      })
      break
    case 'review':
      uni.navigateTo({
        url: '/pages/system/review/list'
      })
      break
    default:
      break
  }
}
</script>

<style lang="scss" scoped>
.system-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.menu-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 40rpx 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  
  &:active {
    opacity: 0.8;
  }
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #4B0082;
}

.user-icon {
  background-color: #4B0082;
}

.role-icon {
  background-color: #2196F3;
}

.permission-icon {
  background-color: #4CAF50;
}

.menu-icon {
  background-color: #FF9800;
}

.log-icon {
  background-color: #F44336;
}

.coach-icon {
  background-color: #9C27B0;
}

.plan-icon {
  background-color: #009688;
}

.statistics-icon {
  background-color: #795548;
}

.file-icon {
  background-color: #607D8B;
}

.review-icon {
  background-color: #E91E63;
}

.menu-text {
  font-size: 28rpx;
  color: #333;
  text-align: center;
}
</style>